import React,{useState,useEffect} from 'react'
import { connect } from 'react-redux';
import {Container} from '../Home/Homedetail/actors/style'
import { useNavigate} from 'react-router-dom'
import { CSSTransition } from 'react-transition-group'

import  {
  changemovienum
}from '@/pages/Home/store/actionCreator'
import LazyLoad from 'react-lazyload';
import waitImg from '@/assets/wait.gif'

function Mine(props) {
  const {movieslist,price} =props
  const 
 {
  changemovienumDispatch
 } = props
  const [show, setShow] = useState(false);
  const navigate = useNavigate()
  const changeGoodNum = (e, status, id) => {
    e.preventDefault();
    e.stopPropagation();
    let data = {
      status:status,
      id:id
    }

    changemovienumDispatch(data)
  }
  useEffect(() => {
    setShow(true)
},[])
  return (
    <CSSTransition
    in={show}
    timeout={300}
    appear={true}
    classNames="fly"
    unmountOnExit
    onExit={() => {
        navigate('/home')
    }}
    >
      <Container>
        <div className="nav_wrap">
              <nav>
                  <span className='navbar-back'  onClick={() => setShow(false)}></span>
                  <div className="navbar-title">购票信息</div>
                  <div className="navbar-btn">
                      <img className="nav-icon" src="https://p0.meituan.net/scarlett/f05f61e7a8f3f45fd071c068d7a26870356.png"/>
                  </div>
              </nav>
        </div>
        <div className='event-list' style={{"paddingTop":"1.5rem"}}>
      { 
        movieslist.map((item) => {
          return (
          item.count!==0 &&
            <div key={item.id} style={{"margin":"1rem 1rem 0rem"}}>
              <div className='list'>
              <LazyLoad placeholder={
                <img width="100%" height="100%"
                  src={waitImg}
              />}>
                <img src = {item.url} style={{"width":"5rem","height":"6rem"}}></img>
              </LazyLoad>
              <div className="list">
              <div className='desc'>
                  <p className='text'>{item.title}</p>
                  <p className='detail'>观众评分：<span style={{"color":"#faa40f","fontWeight":"600"}}>{item.pinfen}</span></p>
                  <p className='detail'>{item.des}</p>
                  <div className='cart'>
                    <p style={{'color':'red'}}> 
                  ￥ {(item.count*1*item.price).toFixed(2)}
                    </p>
                    <span className="cart-price">
                    <span className='reducer'>
                    <i className='iconfont icon-24gl-minus'
                        onClick={(e) => changeGoodNum(e, 'reduce', item.id)}></i>
                    </span>
                      <span style={{'marginLeft':'.6rem','marginRight':'.6rem'}}>{item.count}</span> 
                    <span className='add'>
                    <i className='iconfont icon-24gl-plus'
                        onClick={(e) => changeGoodNum(e, 'add', item.id)}></i>
                    </span>
                    </span>
                  </div>
                  
                </div>
              </div>
              
              </div>
            </div>
          )
        })
      }
        </div>
      {
        price != 0 && <span className='sum'> 总计：{price.toFixed(2)}</span>
                  
      }
      </Container>
   </CSSTransition>
  )
  };
  const mapStateToProps = (state) => {
    let price = state.Home.movieslist.reduce((total,item) => total + (item.check? 
      parseFloat(item.price*item.count) : 0),0)
  
    return {
      movieslist: state.Home.movieslist, 
      // 全选？ 状态？ redux 管理 
      // redux  <-  驱动 -> UI
      price: price
  
    }
  }
  const mapDispatchToProps = (dispatch) => {
    return {

      changemovienumDispatch(data) {
        dispatch(changemovienum(data))
      },
      getmoviesDispatch() {
        dispatch(getmovies())
      },
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Mine))
  